<template>
  <div class="template">
    <!-- <transition name="></transition> -->
    <transition name="breadcrumb">
      <div v-if="type === 'nomorl'" class="box text" id="text_">
        <header>{{ config.header }}</header>
        <div class="message" id="hdemo" :title="config.context">
          <div class="text1" id="hdemo1">{{ config.context }}</div>
          <div style="height: 40px;"></div>
          <div class="text2" id="hdemo2">{{ config.context }}</div>
        </div>
      </div>
    </transition>
    <transition name="breadcrumb">
      <div v-if="type === 'list'" class="box list"><srollBoard :configs="config.config" :title="config.title"></srollBoard></div>
    </transition>
    <transition name="breadcrumb">
      <div v-if="type === 'echarts'" class="box echarts"><component :is="config.name" :config="config.config"></component></div>
    </transition>
  </div>
</template>

<script>
import srollBoard from './srollBoard/index.vue';
var time;
export default {
  props: {
    type: {
      type: String,
      required: true
    },
    config: {
      required: true
    }
  },
  // updated() {
  //   if (this.type === 'nomorl') {
  //   }
  // },
  destroyed() {
    if (this.type === 'nomorl' && time) {
      console.log("清除滚动");
      clearInterval(time);
    }
  },
  watch: {
    type: {
      handler(val) {
        if(val === "nomorl") {
          this.$nextTick(() => {
            this.scoll();
          })
        }
      },
      immediate: true
    }
  },
  components: {
    srollBoard: () => import('./srollBoard'),
    pieCharts: () => import('./echarts/pie.vue'),
    lineCharts: () => import('./echarts/line.vue'),
    histogramCharts: () => import('./echarts/histogram.vue')
  },
  data() {
    return {
      chartInit: null
    };
  },
  created() {},

  methods: {
    scoll() {
      console.log("开始滚动");
      var htab = document.getElementById('hdemo');
      var htab1 = document.getElementById('hdemo1');
      var htab2 = document.getElementById('hdemo2');
      // htab2.innerHTML = htab1.innerHTML;
      htab.scrollTop = htab1.offsetHeight;
      if(time) {
        clearInterval(time);
      }
      function Marquee() {
        // i++;
        if (htab.scrollTop >= htab1.offsetHeight + 50) {
          htab.scrollTop -= htab2.offsetHeight;
        } else {
          htab.scrollTop += 5;
        }
      }
      time = setInterval(Marquee, 100);
    }
  }
};
</script>

<style lang="less" scoped>
  @media only screen and (max-width: 1200px) {
    #text_ {
      header {
        font-size: 15px;
      }
      .message {
        font-size: 14px;
      }
    }
  }
.template {
  height: 100%;
  width: 100%;
  > div {
    height: 100%;
    width: 100%;
    font-size: 16px !important;
  }
  .text {
    header {
      text-align: center;
      // background: ;
      height: 10%;
      font-size: 23px;
      margin: 0;
      text-shadow: 0 0 5px #2bc7f6;
    }

    .message {
      font-size: 20px;
      height: 90%;
      margin: 5px 0;
      overflow: hidden;
    }
  }
}
</style>
